<template>
    <div>
        <div id="d1">
            <p id="p1">{{name}}</p>
            <p id="p2">{{title}}</p>
        </div>
        <div id="d2">
            <mid name="一个陌生女人的来信" :imgUrl="require('../assets/book/3.jpg')"></mid>
            <mid name="人间失格" :imgUrl="require('../assets/book/5.jpg')"></mid>
        </div>
    </div>
</template>

<script>
import mid from './IndexMid12.vue';
    export default {
        components: {
            mid,
        },
        props:["name","title"]
    }
</script>

<style lang="scss" scoped>
    div{
        width: 46%;
        padding-top: 2vw;
        margin-left: 3vw;
        #d1{
            width: 100%;
            display: flex;
            #p1{
                font-weight: bold;
                font-size: 5vw;
            }
            #p2{
                margin-left: 3vw;
                background: rgba(227, 120, 26, 0.778);
                border-radius: 10vw;
                font-size: 3.5vw;
            }
        }
        #d2{
            width: 100%;
            display: flex;
            margin-left: -2vw;
            margin-top: -1vw;
            overflow: hidden;
        }
    }
</style>